<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width,initial-scale=1.0"> 
        <link rel="stylesheet" href="../libs/AdminLTE-2.4.18/bower_components/bootstrap/dist/css/bootstrap.css"> 
        <link rel="stylesheet" href="../libs/AdminLTE-2.4.18/bower_components/font-awesome/css/font-awesome.min.css"> 
        <script src="../libs/AdminLTE-2.4.18/bower_components/jquery/dist/jquery.js"></script>
        <script src="../libs/AdminLTE-2.4.18/bower_components/bootstrap/dist/js/bootstrap.js"></script>
        <script src="../libs/sdk/date.js"></script>
        <script src="../libs/sdk/json.js"></script>
        <script src="../libs/sdk/hhls.js"></script>
        <script src="../libs/sdk/hhIotGateway.js"></script>
        <script src="../libs/sdk/kurento-client.js"></script>
        <script src="../libs/sdk/kurento-utils.js"></script>
        <script src="../libs/sdk/vue.js"></script>
        <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
        <script src="js/clientUtils.js"></script> 
        <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

    
        <title>专家支持</title>

    </head>
    <body>
        <style>
            html , body , #expert{ width: 100%; height: 100%; padding: 0; margin: 0; background-color: #212836; color: #fafafa;}
            ul{ padding: 0; margin: 0; list-style: none;}
 
        </style> 
        <!--  顶部 -->
        <style>
            .divHeader{
                position: fixed;
                z-index: 9999999;
                top: 0;
                width: 100%;
                padding: 10px 0px;
                background-color:#2a3242;
            }
            .divHeader .divToolbar{
                position: relative;
                width:100%;
            }
            .divHeader .divToolbar .divLogo{
                float: left;
                width: 20%;
                padding-left: 20px;
            }
            .divHeader .divToolbar .divLogo img{
                float: left;
                height: 40px;
                line-height: 40px;
                border-radius: 20px;
                padding: 3px;
                background-color: #fafafa;
            }
            .divHeader .divToolbar .divLogo .divLogoTitle{
                float: left;
                height: 40px;
                line-height: 40px;
                font-size: 1.8em;
                padding-left: 10px;
            }
            .divHeader .divToolbar .divMatch {
                float: left;
                padding-left: 15px;
                margin-top: 4px;
            }
            .divHeader .divToolbar .divMatch span{
                height: 36px;
                line-height: 36px;
            }
            .divHeader .divToolbar .divMatch .spanLabel{
                float: left;
                padding-right: 10px;
                color: #999;
            }
            .divHeader .divToolbar .divMatch .spanInfo{
                float: left;
                padding:0px 10px;
                width: 300px;
                border-bottom: 1px solid #fafafa;
            }
            .divHeader .divToolbar .divMatch i{
                float: left; 
                height: 30px;
                line-height: 30px;
                width: 30px;
                text-align: center;
                border:1px solid #fafafa;
                margin-left: 10px;
                margin-top: 6px;;
            }
            .divHeader .divToolbar .divMatch i:hover{
                cursor: pointer;
                background-color: #212836;
            }
            .divHeader .divToolbar .divTopRight {
                float: right;
                padding-right: 20px;
            }
            .divHeader .divToolbar .divTopRight ul.lstFilter{
                padding: 1px;
                border: 1px solid #0e8afe;
                margin-top: 4px;
            }
            .divHeader .divToolbar .divTopRight ul.lstFilter li{
                float: left;
                height: 30px; 
                line-height: 30px;
                padding: 0 10px;

            }
            .divHeader .divToolbar .divTopRight ul.lstFilter li:hover{
                cursor: pointer;
            }
            .divHeader .divToolbar .divTopRight ul.lstFilter li.active{
                background-color: #0e8afe;
            }
        </style>
        
        <!--  左侧 -->
        <style>
            .divSilder{ 
                position: fixed;
                z-index: 98;
                top:0;
                left: 0;
                width: 20%;
                height: 100%;
                background-color: #151a24;
                padding-top: 60px;
            }
            .divSilder .divSrcList{ 
                padding:3px;
                padding-right: 0;
                height: 100%;
                overflow-y: scroll;
                overflow-x: hidden;
            }

                        
            #divSrcList::-webkit-scrollbar-track
            {
                -webkit-box-shadow: inset 0 0 3px rgba(42,50,66,0.3);
                background-color: #212836;
            }

            #divSrcList::-webkit-scrollbar
            {
                width: 3px;
                background-color: #F5F5F5;
            }

            #divSrcList::-webkit-scrollbar-thumb
            {
                background-color: #2a3242;
            }
            .divSilder .divSrcList .divSrc{ 
                position:relative;
                border:1px solid #959fa8;
                height: 0px;
                padding-bottom: 56.25%;
            } 
            .divSilder .divSrcList .divSrc.active{ 
                border:1px solid #a980f2;
            } 
            .divSilder .divSrcList .divSrc video{ 
                position:absolute;
                overflow:hidden;                
                width: 100%; height: 100%; object-fit: cover;
                background-color: #111;
                z-index: 99;
            } 
            .divSilder .divSrcList .divSrc .divVideoTool{ 
                position:absolute;
                overflow:hidden;                
                width: 100%; 
                background-color: rgba(42,50,66,0.3);
                z-index: 999;
            } 
            .divSilder .divSrcList .divSrc .divVideoTool .divVideoTitle{ 
                font-size: 0.75em;
                height: 32px ;
                line-height: 32px;
                padding: 0px 10px;
                color: #fafafa;
            } 
            .divSilder .divSrcList .divSrc.active .divVideoTool .divVideoTitle{ 
                color: #a980f2;
            } 
        </style>

        
        <!--  中间 -->
        <style>
            .divPage{
                padding-top: 60px;
                padding-left: 20%;
            }
            .divPage .divMain{
                padding:15px;
            }
            .divPage .divMain .divMainVideo{
                position: relative;
                margin-bottom: 20px;
            }
            .divPage .divMain .divMainVideo .div169{
                position: relative;
                width: 100%;
                height: 0px;
                padding-bottom: 56.25%;
            }
            .divPage .divMain .divMainVideo .div169 video{
                position: absolute;
                z-index: 99;
                width: 100%;
                height: 100%;
                background-color: #2a3547;
            }
            .divPage .divMain .divSubtite { 
                background-color: #2a3547;
                padding: 15px;
                padding-bottom: 0px;
            }
            .divPage .divMain .divSubtite .divBtn{  
                margin-bottom: 15px;
                text-align: center; 
                border:1px solid #fafafa;
                height: 36px;
                line-height: 36px;
            } 
            .divPage .divMain .divSubtite .divBtn:hover{  
                cursor: pointer;
                background-color:#212836;
            } 
            .divPage .divMain .divSubtite .divBtn.active{  
                background-color: #0e8afe;
                
            } 

            .divFrame{
                position: absolute;
                width: 100%;
                height: 100%;
                z-index:999;
            }
            .divFrame .divContainer{
                position:relative;
                width: 100%;
                height: 100%;
            }
        </style>

        <!-- t02 -->
        <style>
            .t02{
                position: relative;
                width: 100%;
                height: 100%;
            }

            .t02 .divLogo{
                position:absolute;
                width: 4.5%;
                height: 8%;
                background-size: cover;
                background-position: center;
                background-color: #fafafa;
                border-radius: 50%;;
            }
        </style>
        <!-- t03 -->
        <style>
            .t03{
                position: relative;
                width: 100%;
                height: 100%;
                text-shadow: 1px 1px 1px #000;
            }

            .t03 .divPannel{
                position:absolute;
                width: 60%;
                background-color:rgba(18,197,202,0.7);
                left: 50%;
                top:50%;
                transform: translate(-50%, -65%);
            }

            .t03 .divPannel .divPannelHeader{
                border-bottom:2px solid #02abb0;
                padding: 10px;
                position: relative;
                text-align: center;
            }

            .t03 .divPannel .divPannelHeader img{
                height: 60px;
                width: 60px;
            }
            .t03 .divPannel .divPannelHeader .divGame{
                position: absolute;
                height: 35px;
                line-height: 35px;
                font-size: 1.3em;
                left: 50%;
                transform: translate(-50%);
            } 
            .t03 .divPannel .divPannelHeader .divMatch{
                position: absolute;
                height: 25px;
                line-height: 25px;
                font-size: 1.0em;
                left: 50%;
                transform: translate(-50%);
                top:40px;
            } 
            .t03 .divPannel .divPannelBody table{
                width:100%
            } 
            .t03 .divPannel .divPannelBody table tr:nth-child(odd){
                background-color: #00878d;
            } 
            .t03 .divPannel .divPannelBody table tr th{
                height: 40px; line-height: 40px;
                padding-left: 15px;
                background-color: #12c5ca;
            } 
            .t03 .divPannel .divPannelBody table tr td{
                height: 40px; line-height: 40px;
                padding-left: 15px;
            } 


        </style>
        <!-- t04 -->
        <style>
            .t04{
                position: relative;
                width: 100%;
                height: 100%;
                text-shadow: 1px 1px 1px #000;
            }

            .t04 .divSingle{
                position:absolute;
                width: 20%;
                background-color:rgba(18,197,202,0.7);
                left: 50%;
                bottom:10%;
                transform: translate(-50% );
            }
            .t04 .divContain{
                position:relative;
                width: 100%;
                padding-left:80px ;
            }

            .t04 .divSingle .divRow0{
                border-bottom:2px solid #01a8ae;
                height: 40px;
                line-height: 40px;
                padding-left: 20px;
                padding-right: 20px;
            }

            .t04 .divSingle .divRow1{
                border-bottom:0px solid #02abb0;
                height: 40px;
                line-height: 40px;
                padding-left: 20px;
                padding-right: 20px;
            }
            .t04 .divSingle .sinImg{
                position:absolute;
                left: 0;
                top:0;
                height: 0;
                width: 80px;
                height: 80px;
                background-color: #07868b;
            }

        </style>
        <div class="app" id="app"> 
            <div class="divHeader">
                <div class="divToolbar clearfix">
                    <div class="divLogo clearfix">
                        <img src="images/logo.png" alt="">
                        <div class="divLogoTitle">控制台</div>
                    </div>
                    <div class="divMatch clearfix">
                        <span class="spanLabel">比赛场次</span>
                        <span class="spanInfo">{{consoleData.matchs.items[consoleData.matchs.index].name}}</span>
                        <span class="spanBtn"><i class="fa fa-flash"></i></span>
                    </div>
                    <div class="divTopRight clearfix">
                        <ul class="lstFilter clearfix">
                            <li 
                                v-for="(item , index) in consoleData.outs.items"
                                :key="item.code"
                                :class="index==consoleData.outs.index?'active':''"
                                :data-index="index"
                                @click="setOut"
                            >
                            {{item.name}}</li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="divPage">
                <div class="divMain">
                    <div class="divMainVideo">
                        <div class="row">
                            <div class="col-lg-12">
                                <div class="div169" @dblclick="cut" >
                                    <video autoplay class="localVideo"  id="localVideo"></video>
                                    <div class="divFrame">
                                        <div class="divContainer"> 
                                            <router-view style="height: 100%; width:100%; position:relative; padding:5%;"></router-view>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!--
                            <div class="col-lg-6">
                                <div class="div169">
                                    <video autoplay class="previewVideo" id="previewVideo"></video>
                                </div>                                
                            </div>
                            -->
                        </div>
                    </div>
                    <div class="divSubtite">
                        <div class="row">
                            <div 
                                    
                                v-for="(item , index) in consoleData.subtitles.items"
                                :key="item.code"
                                class="col-lg-2"
                            >
                                <div 
                                    :class="(index==consoleData.subtitles.index?'active':'') + ' divBtn'"
                                    :data-index="index"
                                    @click="setSubtitles" 
                                >{{item.name}}</div>
                            </div> 
                        </div> 
                    </div>
                </div>
            </div>
            <div class="divSilder">
                <div class="divSrcList"   id="divSrcList">
                    <div
                        v-for="(item , index) in consoleData.srcs.items"
                        :key="item.code"
                        :class="(index==consoleData.srcs.index?'active':'') + ' divSrc'"
                        :data-index="index"
                        @dblclick="setSrc" 
                    >
                        <video autoplay class="srcVideo" muted :id="'srcVideo-'+item.code"></video>
                        <div class="divVideoTool clearfix">
                            <div class="divVideoTitle">{{item.name}}</div>
                        </div>
                    </div> 
                </div>
            </div>
        </div>
        <script> 
            var sysData ={
                matchs:{
                    index : 0,
                    items:[
                        { code:"m001" , name:"第1场" } ,
                        { code:"m002" , name:"第2场" } ,
                        { code:"m003" , name:"第3场" } ,
                        { code:"m004" , name:"第4场" } ,
                        { code:"m005" , name:"第5场" } ,
                        { code:"m006" , name:"第6场" } ,
                        { code:"m007" , name:"第7场" } 
                    ]
                } ,
                outs:{
                    index : 0 ,
                    items:[
                        { code:"out-Led" , name:"大屏展示" } ,
                        { code:"out-Net" , name:"网络输出" } 
                    ]
                } ,
                srcs:{
                    index : 0 ,
                    items:[
                        { code:"d21" , name:"起点" , type:'d' , url:"rtsp://admin:hhuc1115@ssl.hhdata.cn:1554?channel=2&subtype=1" }  ,
                        { code:"d22" , name:"左机位" , type:'d' , url:"rtsp://admin:hhuc1115@ssl.hhdata.cn:1555?channel=2&subtype=1"} ,
                        { code:"d23" , name:"右机位" , type:'d' , url:"https://vkceyugu.cdn.bspapp.com/VKCEYUGU-learning-vue/98bad050-aecd-11ea-b680-7980c8a877b8.mp4" }  ,
                        { code:"d24" , name:"全景机位" , type:'d' , url:"https://vd4.bdstatic.com/mda-mc4jeuzv91xk6ihb/sc/mda-mc4jeuzv91xk6ihb.mp4" }  ,
                        { code:"d25" , name:"终点机位" , type:'d' , url:"https://vkceyugu.cdn.bspapp.com/VKCEYUGU-learning-vue/52e72470-aecd-11ea-b997-9918a5dda011.mp4" }  ,
                        { code:"w26" , name:"冲刺机位" , type:'s' , url:"" } 
                    ]
                },
                subtitles:{
                    index : -1 ,
                    items:[
                        { code:"t01" , name:"无字幕" } ,
                        { code:"t02" , name:"仅台标" } ,
                        { code:"t03" , name:"秩序单" } ,
                        { code:"t04" , name:"单人出场" } ,
                        { code:"t05" , name:"阶段成绩" } ,
                        { code:"t06" , name:"综合成绩" }  
                    ]
                } 
            }
            /*
            const com01 = { template: '<div>t01</div>' }
            const com02 = { template: '<div>t02</div>' }
            const com03 = { template: '<div>t03</div>' }
            const com04 = { template: '<div>t04</div>' }
            const com05 = { template: '<div>t05</div>' }
            const com06 = { template: '<div>t06</div>' }
            */
            var appRouters ={
                compDatas:{

                },
                comps:[
                    {compKey :'t01' , html:"<div></div>" , fn:"" , dataHandler: null , component: null},
                    {compKey :'t02' , html:"" , fn:"tpls/t02.html" , dataHandler: null , component: null},
                    {compKey :'t03' , html:"" , fn:"tpls/t03.html" , dataHandler: null , component: null},
                    {compKey :'t04' , html:"" , fn:"tpls/t04.html" , dataHandler: null , component: null},
                    {compKey :'t05' , html:"<div>com05</div>" , fn:"" , dataHandler: null , component: null},
                    {compKey :'t06' , html:"<div>com06</div>" , fn:"" , dataHandler: null , component: null},
                ],
                routers:[
                    /*
                    {   path:"/t01" , component: com01 } ,
                    {   path:"/t02" , component: com02 } ,
                    {   path:"/t03" , component: com03 } ,
                    {   path:"/t04" , component: com04 } ,
                    {   path:"/t05" , component: com05 } ,
                    {   path:"/t06" , component: com06 } 
                    */
                ] ,
                registComponents(){
                    var me = appRouters;
                    return new Promise((success,faild)=>{
                        var items = JSON.parse(JSON.stringify( me.comps));
                        var loadItem = function(){
                            if( items.length>0){
                                var item = items.shift();
                                if(!me.compDatas[item.compKey]){
                                    me.compDatas[item.compKey]={};
                                }
                                var compData = me.compDatas[item.compKey];
                                var getHtml = function(onGet) {
                                    if( item.fn && item.fn.length>0){                                        
                                        $.ajax({
                                            url: item.fn,
                                                cache: false,
                                                success: function (aRes) {                                                    
                                                    onGet(aRes);
                                                },
                                                error: function (a, b, c) {
                                                    onGet("<div></div>");
                                                }
                                        });
                                    }
                                    else{
                                        onGet(item.html);
                                    }
                                };
                                getHtml(function(templateHtml){
                                    var template = (templateHtml && templateHtml != null && templateHtml.length>0)? templateHtml:"<div></div>";
                                    var comp = {
                                        template: template  ,
                                        data(){
                                            return{
                                                info: compData
                                            }
                                        },
                                        computed:{
                                            compInfo:function(){
                                                var self = this;
                                                var res = this.info;
                                                if( item.dataHandler && item.dataHandler!=null){
                                                    res = dataHandler(res);
                                                }
                                                return res;
                                            }
                                        }
                                    }
                                    item.component = comp;
                                    me.routers.push({
                                        path:"/"+ item.compKey ,
                                        component: comp
                                    })
                                    loadItem();
                                });
                            }
                            else{
                                success();
                            }
                        }
                        loadItem();
                    });
                }
            }

            appRouters.registComponents().then(()=>{
                loadApp();
            })
 
            var loadApp = function(){
                
                var app = new Vue({
                    el:"#app",
                    created(){
                        var me = this;
                        try{
                            me.clientId = ['console',( new Date()).getTime() , parseInt(1000*Math.random())].join('');
                            me.openMq().then(()=>{
                                return me.getInfo();
                            }).then(()=>{
                                return me.loadPipe();
                            }).then(()=>{
                                return me.createPeerUnit();
                            }).then(()=>{
                                return me.loadSrcs();
                            }).then(()=>{ 
                                console.log('start app.')
                            })
                        }
                        catch(er){
                            console.log(ee);
                        }
                    } ,
                    router: new VueRouter({
                        routes : appRouters.routers
                    }),
                    data(){
                        return{
                            clientId:"",
                            consoleData: sysData,
                            objs:{
                                pipe: null
                            }
                        }
                    } ,
                    methods:{
                        getInfo(){
                            var me = this;
                            return new Promise((success , faild)=>{
                                try{
                                    //me.consoleData = sysData;
                                    success();
                                }
                                catch(er){
                                    console.log(er);
                                    success();
                                }
                            })
                        },
                        openMq(){
                            var me = this;
                            return new Promise((success , faild)=>{
                                try{
                                    var onConnect = function () {
                                        console.log('open mq.' , me.clientId)
                                    }
                                    var onDisConnect = function () {}
                                    var onRecMsg = function (msgData) {
                                        console.log(msgData);
                                    }
                                    commClient.openMq( me.clientId , onConnect , onDisConnect , onRecMsg).then(mqc=>{
                                        me.mqClient = mqc;
                                        success();
                                    });
                                }
                                catch(er){
                                    console.log(er);
                                    success();
                                }
                            })
                        },
                        loadPipe(){
                            var me = this;
                            return new Promise((success , faild)=>{
                                try{
                                    var ps={
                                        code: "vSportPipe",
                                        clientId: me.clientId
                                    };
                                    commClient.callApi( "common" , "kmsManager" ,  "loadPipe" , ps).then(res=>{
                                        commClient.getClient().then(client=>{
                                            client.getMediaobjectById(res.data.kmsId).then(pipe=>{
                                                pipe.info = res.data;
                                                me.objs.pipe = pipe;
                                                success();
                                            })
                                        })
                                    })
                                }
                                catch(er){
                                    console.log(er);
                                    success();
                                }
                            })
                        },
                        createPeerUnit(){
                            var me = this;
                            return new Promise((success , faild)=>{
                                try{
                                success(); 
                                }
                                catch(er){
                                    console.log(er);
                                    success();
                                }
                            })
                        },
                        loadSrcs(){
                            var me = this;
                            return new Promise((success , faild)=>{
                                try{
                                    commClient.getClient().then(client=>{
                                        me.$nextTick(()=>{
                                            var items = JSON.parse(JSON.stringify(me.consoleData.srcs.items));
                                            var loadItem = function(){
                                                if( items.length>0){
                                                    var item = items.shift();
                                                    var video = document.getElementById('srcVideo-'+ item.code);
                                                    var opts =  JSON.parse(JSON.stringify(commClient.config.kmsPeerOptions));
                                                    opts.remoteVideo = video;
                                                    var loadRemoteEnd = function(onLoad){
                                                        var srcPs ={
                                                            pipeId : me.objs.pipe.id ,
                                                            code : 'srcEnd-'+item.code ,
                                                            clientId : me.clientId 
                                                        } 
                                                        var onGetRemoteInfo = function(remoteInfo){
                                                            if( remoteInfo && remoteInfo.kmsId){
                                                                client.getMediaobjectById( remoteInfo.kmsId , function(erFind , srcEnd){
                                                                    srcEnd.info = remoteInfo;
                                                                    onLoad(srcEnd);
                                                                })
                                                            }
                                                            else{
                                                                srcEnd = null;
                                                                onLoad(null);
                                                            }
                                                        }
                                                        if( item.type == 'd' ){
                                                            srcPs.url = item.url;
                                                            commClient.callApi("common" , "kmsManager" , "loadPlayer" , srcPs).then(resSrc=>{
                                                                onGetRemoteInfo(resSrc.data);
                                                            });
                                                        }
                                                        else if( item.type == 's' ){
                                                            var ps = {
                                                                code : 'srcEnd-'+ item.code
                                                            }
                                                            commClient.callApi("common" , "kmsManager" , "getObjByCode" , ps).then(resSrc=>{
                                                                onGetRemoteInfo(resSrc.data);
                                                            });
                                                        }
                                                        else{
                                                            onLoad(null);
                                                        }
                                                    }
                                                    var createLocalUnit = function(onCreate){                                                    
                                                        var peer = kurentoUtils.WebRtcPeer.WebRtcPeerRecvonly(opts, function(erPeer ){
                                                            var pipe = me.objs.pipe;
                                                            pipe.create("WebRtcEndpoint").then(end=>{
                                                                var ps ={
                                                                    code: 'console-'+me.clientId ,
                                                                    kmsId: end.id ,
                                                                    clientId : me.clientId
                                                                }
                                                                commClient.callApi("common" , "kmsManager" , "registObj" , ps).then(res=>{
                                                                    TCommClient.bindPeerEnd(peer , end , function(){
                                                                        item.localUnit = {
                                                                            peer:peer ,
                                                                            end: end
                                                                        };
                                                                        onCreate(end);
                                                                    })
                                                                })
                                                            })
                                                        })
                                                    }
                                                    loadRemoteEnd(function(srcEnd){
                                                        item.secEnd = srcEnd;
                                                        createLocalUnit(function(localEnd){
                                                            if( srcEnd && srcEnd!=null ){
                                                                srcEnd.connect(localEnd , function(erConnect){
                                                                    loadItem();
                                                                })
                                                            }
                                                            else{
                                                                loadItem();
                                                            }
                                                        })
                                                    })
                                                }
                                                else{
                                                    success();
                                                }
                                            }
                                            loadItem();
                                        })
                                    })
                                }
                                catch(er){
                                    console.log(er);
                                    success();
                                }
                            })
                        },
                        setMatch( event ){
                            var me = this;
                            return new Promise((success , faild)=>{
                                try{

                                }
                                catch(er){
                                    console.log(er);
                                    success();
                                }
                            })
                        },
                        setOut( event ){
                            var me = this;
                            return new Promise((success , faild)=>{
                                try{
                                    var index = event.currentTarget.dataset.index;
                                    me.consoleData.outs.index = index;
                                }
                                catch(er){
                                    console.log(er);
                                    success();
                                }
                            })
                        },
                        setSrc( event ){
                            var me = this;
                            return new Promise((success , faild)=>{
                                try{
                                    var index = event.currentTarget.dataset.index;
                                    me.consoleData.srcs.index = index;
                                    var src = me.consoleData.srcs.items[me.consoleData.srcs.index];
                                    console.log(src);
                                    var srcVideo = document.getElementById("srcVideo-"+src.code);
                                    var tarVideo = document.getElementById("localVideo");
                                    tarVideo.srcObject = srcVideo.srcObject;

                                }
                                catch(er){
                                    console.log(er);
                                    success();
                                }
                            })
                        },
                        setSubtitles( event ){
                            var me = this;
                            return new Promise((success , faild)=>{
                                try{
                                    var index = event.currentTarget.dataset.index;
                                    me.consoleData.subtitles.index = index;
                                    var subtitles = me.consoleData.subtitles.items[me.consoleData.subtitles.index];
                                    console.log(subtitles);
                                    me.updateSubtitlesData().then((data)=>{
                                        me.$router.push({path:"/"+subtitles.code , query:{tm:( new Date()).getTime()}})
                                    })
                                }
                                catch(er){
                                    console.log(er);
                                    success();
                                }
                            })
                        },
                        updateSubtitlesData(   ){
                            var me = this;
                            return new Promise((success , faild)=>{
                                try{
                                    var data ={
                                        match: me.consoleData.matchs.items[me.consoleData.matchs.index] ,
                                        out:me.consoleData.outs.items[me.consoleData.outs.index],
                                        src:me.consoleData.srcs.items[me.consoleData.srcs.index],
                                        subtitle:me.consoleData.subtitles.items[me.consoleData.subtitles.index]
                                    }
                                    var subCode = data.subtitle.code;
                                    appRouters.compDatas[subCode] = data;
                                    success(data);
                                }
                                catch(er){
                                    console.log(er);
                                    success();
                                }
                            })
                        },
                        cut(   ){
                            var me = this;
                            return new Promise((success , faild)=>{
                                try{
                                    me.updateSubtitlesData().then((data)=>{ 
                                        var topic = commClient.config.mq.topics.appTopic+"/"+commClient.config.appId ;
                                        var msg = {
                                            msgId: "setSubtitles",
                                            msgBody: data
                                        }
                                        me.mqClient.publish(topic , JSON.stringify(msg));
                                    })

                                }
                                catch(er){
                                    console.log(er);
                                    success();
                                }
                            })
                        }
                    }
                })
            
            }
            
        </script>
    </body>
</html>